<template>
  <div class="PendingPayment">
    <div class="ele-title-1"><h4>订单详情</h4></div>
    <div class="ele-alert">
      <el-alert
        v-if="goodsInfo.hasUrgent == '1'"
        title="改订单存在加急配送，请及时处理"
        type="error"
        effect="dark"
      />
      <p />
      <el-alert
        v-if="goodsInfo.hasSubscribe == '1'"
        title="改订单存在预约配送，请及时处理"
        type="success"
        effect="dark"
      />
    </div>
    <div class="ele-title-2">
      <!-- *
      //   "101">待付款
      //   "201">代发货
      //   "302">待用户自提
      //   "301">待用户收货
      //   "401">使用中
      //   "501">待取货GloudWarehouse
      //   "502">待商户收货
      //   "503">待用户结算
      //   "701">已关闭
      //   "801">已完成 -->
      <h2 v-if="status == 101">状态:待付款</h2>
      <h2 v-else-if="status == 701">状态:已关闭</h2>
    </div>
    <div class="ele-Payment">
      <p>
        <span class="p-ele-ment">订单号:{{ goodsInfo.orderSn }}</span>
        <span v-if="status == 701" class="p-ele-pay">交易号: {{ goodsInfo.payId }}</span>
      </p>
      <p>下单时间:{{ goodsInfo.addTime }}</p>
    </div>
    <div v-if="goodsInfo.state == 101" class="ele-button">
      <el-button
        class="ele-btn"
        type="primary"
        @click="updatePrice"
      >改价</el-button>
      <el-button
        class="ele-btn"
        type="primary"
        @click="cancelBigOrder"
      >取消订单</el-button>
    </div>
    <div class="ele-content-info">
      <ul>
        <li>
          <span class="ele-title-txt">收货信息</span>
          <!--          <el-button type="text" style="margin:0;padding:0px" @click="copyReceiverInfo">复制</el-button>-->
        </li>
        <div class="receiverInfo">
          <!--          <el-input type="text" v-model="receiverInfo" id="receiverInfo" ></el-input>-->
          <li>
            <span class="ele-font-left">收货人:</span><span id="receiverInfo" class="ele-font">{{ OrderDetail.receiverName }}</span>
          </li>
          <li>
            <span class="ele-font-left">电话:</span><span class="ele-font">{{ OrderDetail.receiverPhone }}</span>
          </li>
          <li>
            <span class="ele-font-left">收货地址:</span><span class="ele-font shdz">{{ OrderDetail.receiverAddress }}</span>
          </li>
        </div>
      </ul>

      <ul>
        <li><span class="ele-title-txt">下单信息</span></li>
        <li>
          <span class="ele-font-left">运费:</span><span>{{ OrderDetail.freightPrice }}</span>
        </li>
        <li v-if="status == 701"><span class="ele-font-left">下单门店:</span><span /></li>
        <li v-if="status == 701">
          <span class="ele-font-left">门店地址:</span><span class="mddz" />
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">买家信息</span></li>
        <li>
          <span class="ele-font-left">买家:</span><span>{{ OrderDetail.userName }}&nbsp;&nbsp;{{ OrderDetail.userPhone }}</span>
        </li>
        <li>
          <span class="ele-font-left">备注:</span>{{ OrderDetail.remark }}<span />
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">支付信息</span></li>
        <li>
          <span class="ele-font-left">支付方式:</span><span>{{
            OrderDetail.payType == 'WEIXIN'
              ? '微信'
              : OrderDetail.payType == 'WEIXINPAYSCORE'
                ? '支付分'
                : ''
          }}</span>
        </li>
        <li>
          <span class="ele-font-left">支付金额:</span><span>{{ OrderDetail.payAmount }}</span>
        </li>
      </ul>
    </div>
    <div v-for="(item, index) in goodsList" :key="index">
      <div v-if="item.goodsType === 'lease'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '2'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="100">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="押金" prop="depositPrice" width="100">
            <template slot-scope="scope">
              {{ scope.row.depositPrice + '元' }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" />
          <el-table-column label="租期" prop="leaseDay" width="100">
            <template slot-scope="scope">
              {{ scope.row.leaseDay }}
            </template>
          </el-table-column>
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">代发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户自提</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 701">已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
      <div v-else-if="item.goodsType === 'sale'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '2'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="200">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="200">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="押金" prop="depositPrice" width="100">
            <template slot-scope="scope">
              {{ scope.row.depositPrice + '元' }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" />
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">代发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 701">已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
    </div>
    <!--取消订单弹窗-->
    <el-dialog :visible.sync="visible_cancelOrder" title="取消订单" :modal="false">
      <el-form ref="cancelForm" :model="cancelForm" label-width="100px" :rules="rules">
        <el-form-item label="原因" prop="reason">
          <el-input v-model="cancelForm.reason" placeholder="输入取消订单原因" maxlength="20" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCancel">确认取消订单</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { cancelOrder, rentOrderDetail } from '@/api/order'
export default {
  name: 'PendingPayment',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      row: null,
      receiverInfo: '',
      show: false,
      status: '',
      // 订单详情
      OrderDetail: {},
      // 子订单商品列表
      goodsList: [],
      // 详细信息
      goodsInfo: {},

      /** 取消订单弹窗*/
      visible_cancelOrder: false,
      cancelForm: {
        id: null,
        reason: null
      },
      rules: {
        reason: [{ required: true, message: '取消订单原因不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.initailInfo()
  },
  activated() {
    this.initailInfo()
  },
  methods: {
    /** 发货 */
    goDelivery() {},
    initailInfo() {
      const params = this.$route.params
      if (params) {
        this.status = params.status
        this.row = params.rows
        rentOrderDetail({
          state: params.status,
          orderId: params.rows.suboId,
          bigOrderId: params.rows.bigOrderId
        })
          .then(result => {
            console.log(result.data.data)
            this.OrderDetail = result.data.data.receiveInfo
            this.receiverInfo = this.OrderDetail.receiverName + ' ' + this.OrderDetail.receiverPhone + ' ' + this.OrderDetail.receiverAddress
            this.goodsList = result.data.data.subOrderList
            this.goodsInfo = result.data.data
          })
          .catch(() => {})
      }
    },
    hearderCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      }
    },
    /** 修改价格*/
    updatePrice() {
      this.$router.push({
        name: 'updatePrice',
        query: {
          p: this.$ed({
            orderId: this.row.suboId
          })
        }
      })
    },
    copyReceiverInfo() {
      /* this.show = true*/
      var info = document.getElementById('receiverInfo')
      console.log(info)
      document.execCommand('copy', false, info.select())
      this.$message.info('信息已复制')
      /* this.show = false*/
    },
    cancelBigOrder() {
      this.visible_cancelOrder = true
      this.cancelForm.id = this.row.bigOrderId
    },
    submitCancel() {
      this.$refs.cancelForm.validate(v => {
        if (v) {
          const data = this.$XEUtils.clone(this.cancelForm, true)
          cancelOrder(data).then(res => {
            console.log(res)
            this.$message.success('取消订单成功')
            this.visible_cancelOrder = false
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          }).catch(() => {})
        }
      })
    }
  }
  /* beforeRouteEnter(to, from, next) {
    if (to.query.status === 701) {
      to.meta.title = '已关闭'
    } else {
      to.meta.title = '待发货'
    }
    next()
  }*/
}
</script>

<style lang="scss" scoped>
.PendingPayment {
  padding: 50px 100px;
  .ele-title-2 {
    margin-top: 40px;
  }
  .ele-Payment {
    width: 50%;
    border: 2px solid #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
    p {
      padding: 5px 0px 2.5px 0px;
      color: gray;
      .p-ele-ment {
        margin-right: 15px;
      }
      .p-ele-pay {
        margin-left: 30px;
        color: black;
      }
    }
    p:last-child {
      color: black;
    }
  }
  .ele-button {
    margin: 30px 0px 30px 0px;
    .ele-btn {
      width: 100px;
    }
  }
  .ele-content-info {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    ul,
    li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul {
      padding: 20px 60px 20px 20px;
      li {
        padding: 10px 0px;
        font-size: 15px;
        display: flex;
        align-items: flex-start;
      }
      .ele-title-txt {
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
      }
      .ele-font {
        color: gray;
      }
      .ele-font-left {
        display: inline-block;
        width: 80px;
      }
      .shdz,
      .mddz {
        display: inline-block;
        width: 300px;
      }
    }
  }

  .ele-table {
    margin-top: 40px;
    .custom {
      font-size: 12px;
      display: inline-block;
      background: #2db300;
      color: white;
      padding: 1px 5px;
    }
  }
  .ele-bzm {
    display: flex;
    justify-content: space-between;
    .ele-p-right {
      span:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
